<template>
  <div class="project-manager">

    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="项目列表" name="first">
        <div class="project-list">
          <addProject v-on:getProject="getProject"></addProject>
        </div>

        <div>
          <el-row>
            <el-col :span="6" v-for="(item,index) in getProjectList.list" :key="index">
              <div class="grid-content bg-purple">
                <div class="box" @click="setProjectId(item.id,item.name)">
                  <router-link :to="{path:'/AiTestingInterface-api/apiManager', params:{} }">
                    <li v-if="item.id % 4 == 0" class="box1">
                      <i class="el-icon-plus" style="color:#495060"></i>
                    </li>
                    <li v-else-if="item.id % 4 == 1" class="box1 box2">
                      <i class="el-icon-plus" style="color:#495060"></i>
                    </li>
                    <li v-else-if="item.id % 4 == 2" class="box1 box3">
                      <i class="el-icon-plus" style="color:#495060"></i>
                    </li>
                    <li v-else-if="item.id % 4 == 3" class="box1 box4">
                      <i class="el-icon-plus" style="color:#495060"></i>
                    </li>
                  </router-link>

                  <div style="padding:10px">
                    <span class="project-span">{{item.name}}</span>
                  </div>
                </div>
              </div>
            </el-col>

          </el-row>
        </div>

      </el-tab-pane>
      <el-tab-pane label="项目描述" name="second">项目描述</el-tab-pane>
    </el-tabs>

  </div>
</template>


<script>
import addProject from './addProject.vue'
export default {
  data () {
    return {
      activeName: 'first',
      getProjectList: {
        list: [],
        count: 0,

      }
    }
  },

  components: {
    addProject
  },

  methods: {

    //查询项目
    getProject () {
      this.$http({
        url: this.$http.adornUrl('/aitesting/project/list'),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.getProjectList.list = data.page.list
        this.getProjectList.count = data.page.totalCount
        console.log(this.getProjectList.list)
      })

    },

    //保存projectId
    setProjectId (projectId, projectName) {
      this.$store.commit("api/updateProjectId", projectId);
      this.$store.commit("api/updateProjectName", projectName);
      console.log(this.$store.state.api.projectId)
    },

    handleClick () {
    }
  },

  mounted () {

    this.getProject()
  }

}
</script>

<style scoped>
.project-list {
  height: 40px;
  background-color: #e9eaec;
  margin: 10px;
}

.project-manager .box {
  display: inline-block;
  width: 220px;
  height: 140px;
  margin: 30px 50px;
  text-align: center;
}

.project-manager .box1 {
  display: inline-block;
  width: 120px;
  height: 120px;
  border: 2px solid #f3f3f3;
  text-align: center;
  line-height: 200px;
  font-weight: bold;
  font-size: 24px;
  background: #ec7a7a;
  border-radius: 50%;
}

.project-manager .box2 {
  background: #4cbbe2;
}

.project-manager .box3 {
  background: #83ce83;
}

.project-manager .box4 {
  background: #bc82f1;
}

.project-manager .project-span {
  font-size: 25px;
  color: rgb(60, 59, 59);
}
</style>